<template>
  <g class="hud"
    v-if="playerStore.players.size > 0"
    :transform="`translate(${1.5 * BLOCK + FIELD}, ${BLOCK * 1.5})`"
  >
    <EnemyCountIcon
      v-for="v in recordStore.remainEnemyCount"
      :key="v"
      :transform="`translate(${v % 2 ? 0 : GRID}, ${Math.floor((v - 1) / 2) * GRID})`"
    />
    <Text
      :content="`\u2160P`"
      fill="#000"
      :transform="`translate(0, ${6.5 * BLOCK})`"
    />
    <PlayerHPIcon
      :transform="`translate(0, ${7 * BLOCK})`"
    />
    <Text
      :content="hp1"
      fill="#000"
      :transform="`translate(${GRID}, ${7 * BLOCK})`"
    />
    <g v-if="recordStore.mode === 'double'">
      <Text
        :content="`\u2161P`"
        fill="#000"
        :transform="`translate(0, ${8 * BLOCK})`"
      />
      <PlayerHPIcon
        :transform="`translate(0, ${8.5 * BLOCK})`"
      />
      <Text
        :content="hp2"
        fill="#000"
        :transform="`translate(${GRID}, ${8.5 * BLOCK})`"
      />
    </g>
    <Flag
      :transform="`translate(0, ${9.5 * BLOCK})`"
    />
    <g
      :transform="`translate(${-1 * GRID}, ${10.5 * BLOCK})`"
    >
      <Text
        v-for="(v, i) in String(recordStore.stage.count).padStart(3, ' ')"
        :key="i"
        :content="v"
        fill="#000"
        :transform="`translate(${i * GRID}, 0)`"
      />
    </g>
  </g>
</template>

<script setup>
  import EnemyCountIcon from '@/components/EnemyCountIcon.vue'
  import PlayerHPIcon from '@/components/PlayerHPIcon.vue'
  import Text from '@/components/Text.vue'
  import Flag from '@/components/Flag.vue'
  import { useRecordStore } from '@/store/gameRecord'
  import { usePlayerStore } from '@/store/player'
  import { BLOCK, FIELD, GRID } from '@/utils/global'
  import { computed } from 'vue'

  const recordStore = useRecordStore()
  const playerStore = usePlayerStore()

  const hp1 = computed(() => playerStore.getPlayer(1)?.hp > 0 ? `${playerStore.getPlayer(1).hp - 1}` : '0')
  const hp2 = computed(() => playerStore.getPlayer(2)?.hp > 0 ? `${playerStore.getPlayer(2).hp - 1}` : '0')
</script>

<style lang="scss" scoped>

</style>